<template>
    <div class='myselfVideo' >
        <el-card class='videoCard' v-for="(o, index) in videoList" :key="index" :body-style="{ padding: '0px' }">
            <img :src="localhost+videoImagePath+o.image" @click='showVideo(o)' class="image">
            <div style="padding: 14px;">
                <span>{{o.name}}</span>
                <div class="bottom clearfix">
                    <time class="time">{{ o.info }}</time>
                    <el-dropdown class='optbyn' @click="handleClick">
                        <el-button type="text" class="button" icon='el-icon-setting'></el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click='del(o)'>删除</el-dropdown-item>
                            <el-dropdown-item @click='showVideo(o)'>观看</el-dropdown-item>
                            <!-- <el-dropdown-item>编辑</el-dropdown-item> -->
                            <!-- <el-dropdown-item disabled>双皮奶</el-dropdown-item> -->
                            <!-- <el-dropdown-item divided>审核</el-dropdown-item> -->
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import { getVideoListByMasterId , delVideo } from '@/api/myself.js';
import { mapGetters } from 'vuex';
import { get_cache } from '@/util/cache.js';
import { localhost, videoPath ,videoImagePath } from '@/api/config.js'
export default {
    data (){
        return {
            currentDate: new Date(),
            videoList: [],
            videoImagePath,
            localhost
        }
    },
    comments :{
        ...mapGetters(["user"])
    },
    mounted (){
        this.getVideoListByMasterId();
    },
    methods: {
        getVideoListByMasterId(){
            getVideoListByMasterId({ masterId: get_cache("token") }).then((e)=>{
                if( e.data.code == 200 ){
                    this.videoList = e.data.data;
                }else{
                    this.$message({
                        type: "error",
                        message: e.data ? e.data.msg : "请求失败"
                    })
                }
            });
        },

        del (it){
            delVideo({
                video: it.id,
                user: this.user.id,
            }).then((e)=>{
                if( e.data.code == 200 ){
                    this.$message({type: "success", message: "删除成功"});
                }else{
                    this.$message({type: "success", message: e.data.msg || "删除失败"});
                }
            })
        },

        showVideo (it){
            open("./#/video/"+it.id);
        },

        handleClick (){
        }
    }
}
</script>

<style scoped>
    .myselfVideo {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        background: #cacacaa8;
    }

    .time {
        font-size: 13px;
        color: #999;
    }
    
    .button:hover {
        transform: rotateZ(360deg);
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .optbyn {
        position:absolute;
        bottom: 2px;
        right: 2px;
    }
    
    .button {
        transform: rotateZ("0deg");
        transition: all 0.25s;
        padding: 0;
        /* float: right; */
    }

    .image {
        width: 100%;
        display: block;
        height:120px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    
    .clearfix:after {
        clear: both
    }

    .videoCard:hover {
        box-shadow: #002bff 0px 0px 10px;
    }

    .videoCard {
        cursor: pointer;
        margin: 6px;
        width: calc(25% - 12px);
        position: relative;
        box-sizing: border-box;
    }

    .videoBox {
        background: #cacacaa8;
    }
</style>